@import '../basic/globalVar.scss';
@import '../mixins/index.scss';
@include classNameConnect(button-group) {
  display: inline-block;
  font-size: 0;
  line-height: normal;

  @include classNameConnect(button) {
    position: relative;

    &:hover,
    &:focus,
    &:active {
      z-index: 2;
    }

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
    &:not(:last-child) {
      margin-right: -1px;
    }

    @include b(type-primary, false, true) {
      border-left-color: mix(
        $--color-black,
        $--button-border-color-primary,
        $--button-active-percent
      );
    }
    @include b(type-success, false, true) {
      border-left-color: mix(
        $--color-black,
        $--button-border-color-success,
        $--button-active-percent
      );
    }
    @include b(type-info, false, true) {
      border-left-color: mix(
        $--color-black,
        $--button-border-color-info,
        $--button-active-percent
      );
    }
    @include b(type-danger, false, true) {
      border-left-color: mix(
        $--color-black,
        $--button-border-color-danger,
        $--button-active-percent
      );
    }
    @include b(type-warning, false, true) {
      border-left-color: mix(
        $--color-black,
        $--button-border-color-warning,
        $--button-active-percent
      );
    }
  }
}
